<template>
    <div class="vTable">
        <div ref="table" class="body">
            表格
        </div>
        <a-pagination style="text-align: right;padding: 5px;" v-model:current="current2" show-quick-jumper
            :total="total" show-less-items :show-total="(total: number) => `共 ${total} 条`" @change="onChange" />
        <a-spin tip="加载中..." class="loading" v-if="loading">
        </a-spin>
    </div>
    <a-modal v-model:open="open" title="编辑" @ok="handleOk">
       <div v-for="item in editData" :key="item">
           {{item}}
       </div>
    </a-modal>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import * as VTable from '@visactor/vtable'
import { message } from 'ant-design-vue'
const open = ref(false)
const editData: any = ref()

const loading = ref(false)
const table: any = ref(null)
let tableInstance: any;
const rowSeriesNumberWidth = 70
const columns = [
    { field: 'Order ID', title: 'ID', width: '150', icon: 'order' },
    { field: 'Customer ID', title: '消费者', width: '150' },
    {
        field: 'bloggerName',
        title: '是否',
        width: 80,
        customLayout: (args: any) => {
            const { table, row, col, rect } = args;
            const { height, width } = rect ?? table.getCellRect(col, row);
            const container: any = new VTable.CustomLayout.Group({
                height,
                width,
                display: 'flex',
                flexDirection: 'row',
                flexWrap: 'nowrap',
                justifyContent: 'center',
                alignItems: 'center',
            });
            const containerRightBottom: any = new VTable.CustomLayout.Group({});
            container.add(containerRightBottom);

            const tag = new VTable.CustomLayout.Tag({
                text: row % 2 == 0 ? "否" : '是',
                textStyle: {
                    fontSize: 15,
                    fontFamily: 'sans-serif',
                    fill: row % 2 == 0 ? 'white' : 'white'
                },
                panel: {
                    visible: true,
                    fill: row % 2 == 0 ? '#ef4136' : '#009ad6',
                    cornerRadius: 5
                },
                space: 5,
                boundsPadding: [0, 0, 0, 0]
            });
            containerRightBottom.add(tag);
            return {
                rootContainer: container,
                renderDefault: false
            };
        }
    },
    {
        field: 'Product Name', title: '产品名称', width: '250',
        headerIcon: [
            {
                name: 'question',
                type: 'svg',
                marginLeft: 10,
                positionType: VTable.TYPES.IconPosition.contentRight,
                width: 20,
                height: 20,
                svg: `<svg t="1706853751091" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4226" width="200" height="200"><path d="M533.333333 85.333333c-247.426667 0-448 200.573333-448 448s200.573333 448 448 448 448-200.573333 448-448-200.573333-448-448-448z m0 853.333334c-223.86 0-405.333333-181.473333-405.333333-405.333334s181.473333-405.333333 405.333333-405.333333 405.333333 181.473333 405.333334 405.333333-181.473333 405.333333-405.333334 405.333334z m21.333334-192a21.333333 21.333333 0 1 1-21.333334-21.333334 21.333333 21.333333 0 0 1 21.333334 21.333334z m-21.333334-85.333334a21.333333 21.333333 0 0 1-21.333333-21.333333v-42.666667a21.333333 21.333333 0 0 1 6.246667-15.086666c13.1-13.093333 28.9-24.886667 45.633333-37.333334C601.333333 516.966667 640 488.1 640 448c0-58.813333-47.853333-106.666667-106.666667-106.666667s-106.666667 47.853333-106.666666 106.666667a21.333333 21.333333 0 0 1-42.666667 0 149.333333 149.333333 0 0 1 298.666667 0c0 28.113333-10.6 53.873333-32.406667 78.74-17.593333 20.046667-39.593333 36.466667-60.873333 52.34-12.666667 9.453333-24.76 18.473333-34.72 27.433333V640a21.333333 21.333333 0 0 1-21.333334 21.333333z" fill="#5C5C66" p-id="4227"></path></svg>`,
                tooltip: {
                    style: { arrowMark: true },
                    // 气泡框，按钮的的解释信息
                    title: 'this is product name',
                    placement: VTable.TYPES.Placement.right
                }
            }
        ]
    },
    {
        field: 'Category', title: '分类', width: 'auto',
        style: (styleArg: any) => {
            if (styleArg.value == 'Furniture')
                return { color: "white", bgColor: '#9b95c9' }
        }
    },
    { field: 'Sub-Category', title: '替补分类', width: '350' },
    { field: 'Region', title: '区域', width: 'auto' },
    { field: 'City', title: '城市', width: 'auto' },
    { field: 'Order Date', title: '日期', width: 'auto' },
    {
        field: '2234',
        title: '操作',
        width: 150,
        icon: [
            {
                name: 'edit',
                type: 'svg',
                marginLeft: 10,
                color: 'blue',
                positionType: VTable.TYPES.IconPosition.left,
                width: 46,
                height: 23,
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" viewBox="0 0 40 20">  
                            <rect x="0" y="0" width="40" height="20" rx="4" ry="4" fill="blue" />  
                            <text x="50%" y="50%" text-anchor="middle" dy=".35em" fill="white" font-size="13">编辑</text>  
                      </svg>`,
                tooltip: {
                    style: { arrowMark: true },
                    // 气泡框，按钮的的解释信息
                    title: '编辑',
                    placement: VTable.TYPES.Placement.right,
                },
            },
            {
                name: 'delete',
                type: 'svg',
                marginLeft: 20,
                color: 'blue',
                positionType: VTable.TYPES.IconPosition.left,
                width: 46,
                height: 23,
                svg: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="20" viewBox="0 0 40 20">  
                            <rect x="0" y="0" width="40" height="20" rx="4" ry="4" fill="red" />  
                            <text x="50%" y="50%" text-anchor="middle" dy=".35em" fill="white" font-size="13">删除</text>  
                      </svg>`,
                tooltip: {
                    style: { arrowMark: true },
                    // 气泡框，按钮的的解释信息
                    title: '删除',
                    placement: VTable.TYPES.Placement.right,
                },
            }
        ],
    }
];
const initColumns = (columns: any) => {
    const { length, widths } = calculateLength(columns)
    const newColumns = columns.map((el: any) => {
        let newWidth = length <= 10 ? (100 - widths * 100) / length : 10
        if (newWidth < 10) newWidth = 10
        if (!el.width || el.width == "auto") el.width = newWidth + "%"
        return el
    })
    return newColumns
}
const calculateLength = (columns: any) => {
    let length = 0
    let widths: any = 0
    columns.forEach((el: any) => {
        if (!el.width || el.width == "auto") length++
        if (el.width * 1 > 0) widths += el.width * 1
    })
    if (widths > table.value.offsetWidth) {
        widths = 0
    } else {
        widths = ((widths + rowSeriesNumberWidth) / table.value.offsetWidth).toFixed(2)
    }
    return {
        length,
        widths
    }
}

const getData = (option: any) => {
    loading.value = true;
    fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
        .then((res) => res.json())
        .then((data) => {
            option.records = data;
            tableInstance = new VTable.ListTable(table.value, option);
            loading.value = false;
            tableInstance.on('click_cell', (args: any) => {
                console.log(args);
                const { col, row, targetIcon } = args;
                if (targetIcon) {
                    if (targetIcon.name === 'edit') {
                        editData.value = args.originData
                        open.value = true
                    } else if (targetIcon.name === 'delete') {
                        data.splice(row - tableInstance.columnHeaderLevelCount, 1);
                        tableInstance.setRecords(data);
                        message.error('删除第 ' + (row - tableInstance.columnHeaderLevelCount + 1) + ' 条数据');
                    } else if (targetIcon.name === 'order') {
                        const value = tableInstance.getCellValue(col, row);
                        message.success('已复制订单号： ' + value);
                    }
                }
            })
        })
}
const handleOk = () => {
    open.value = false
}
const current2 = ref<number>(2);
const total = 500
const onChange = (pageNumber: number) => {
    console.log('Page: ', pageNumber);
};
onMounted(() => {
    const option: any = {
        records: [],
        columns: initColumns(columns),
        frozenColCount: 2,
        rightFrozenColCount: 1,
        widthMode: 'standard',
        heightMode: 'autoHeight',
        autoWrapText: true,
        rowSeriesNumber: {
            title: '序号',
            width: rowSeriesNumberWidth,
            bodyStyle: {
                fontSize: 14
            },
            headerStyle: {
                fontSize: 14
            }
        },
        defaultRowHeight: 35,
        select: {
            highlightMode: 'row'
        },
        emptyTip: {
            text: '暂无数据'
        },
        theme: VTable.themes.DEFAULT.extends({
            bodyStyle: {
                fontSize: 14
            },
            headerStyle: {
                fontSize: 14
            }
        })
    }

    tableInstance = new VTable.ListTable(table.value, option)
    loading.value = true;
    setTimeout(() => {
        getData(option)
    }, 1500)
})
</script>

<style scoped lang="scss">
.vTable {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: 5px;
    position: relative;

    .body {
        flex: 1;
    }

    .loading {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.1);
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

    }
}
</style>